<template>
<div class="person">
  <el-dialog
    width="900px"
    custom-class="left1k"
    center
    :before-close="closeDialog"
    title="加入人员"
    :close-on-click-modal="false"
    append-to-body
    :visible.sync="addDialogFormVisible"

  >
    <div style="margin-left:-80px">
      <el-form :inline="true" :model="dataForm" ref="dataForm" class="elformcss">
        <el-form-item label="部门" prop="departmentGuid">
          <el-cascader
            size="mini"
            v-model="departmentGuid"
            :options="deptTree"
            ref="cascaderAddDept"
            placeholder="请选择部门"
            @change="handleChangeDept"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="姓名" prop="username">
          <el-input v-model="dataForm.username" size="mini" clearable></el-input>
        </el-form-item>
        <el-form-item label="卡号" prop="carnumber">
          <el-input v-model="dataForm.carnumber" size="mini" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchifo" size="mini">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :stripe="true"
        border
        :header-cell-style="headFirst"
        @selection-change="handleSelectionChange"
        :cell-style="(res) => headFirst_col(res, [])"
      >
        <el-table-column type="selection" width="45" align="center"></el-table-column>
        <el-table-column prop="userNumber" label="编号" align="center"></el-table-column>
        <el-table-column prop="cardNumber" label="卡号" align="center"></el-table-column>
        <el-table-column prop="userName" label="姓名" align="center"></el-table-column>
        <el-table-column prop="userSex" label="性别" align="center">
          <template slot-scope="scope">{{scope.row.userSex | userSexType}}</template>
        </el-table-column>
        <el-table-column prop="departmentName" label="部门" align="center"></el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChangepage"
        :current-page="currentPage"
        :page-sizes="[5,10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="recordCount"
      ></el-pagination>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="addvisible ()">取消</el-button>
      <el-button type="primary" @click="addataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addDialogFormVisible: false,
      dataForm: {
        username: "",
        carnumber: ""
      },
      departmentGuid: [],
      deptTree: [],
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      recordCount: 0,
      currentPage: 1,
      searchInfo: {},
      selectarr: [],
      roomGuid: ""
    };
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid;
      }
    }
  },
  filters: {
    userSexType(val) {
      if (val == 0) {
        return "男";
      } else if (val == 1) {
        return "女";
      }
    }
  },
  mounted() {
    this.getDeptTree();
  },
  methods: {
    closeDialog(done) {
      this.addDialogFormVisible = false;
      done();
    },
    addvisible() {
      this.departmentGuid = [];
      this.tableData = [];
      this.$refs["dataForm"].resetFields();
      this.pageNum = 1,
      this.pageSize = 10,
      this.recordCount = 0,
      this.currentPage = 1,
      this.addDialogFormVisible = false;
    },
    addataFormSubmit() {
      if (this.selectarr.length < 1) {
        this.$message({
          message: "请选择人员",
          type: "warning"
        });
        return;
      }
      this.$refs["dataForm"].resetFields();
      this.$emit("refreshDataList", this.selectarr);
      this.addDialogFormVisible = false;
    },
    addinit(roomGuid) {
      this.roomGuid = roomGuid;
      this.addDialogFormVisible = true;
    },
    handleChangeDept() {
      console.log(this.departmentGuid);
    },
    searchifo() {
      this.getdepartmentinfo();
    },
    handleSelectionChange(val) {
      this.selectarr = [];
      for (var i = 0; i < val.length; i++) {
        this.selectarr.push(val[i].userGuid);
      }
      // console.log(this.selectarr)
    },
    //部门信息
    getDeptTree() {
      this.$http({
        url: this.$http.adornUrl("/department/select-department-tree"),
        method: "post",
        data: this.$http.adornData({
          messageContent: this.changeschoolid,
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          console.log(data.messageContent);
          this.deptTree = data.messageContent;
          this.recursiveget(this.deptTree);
          // console.log(JSON.stringify(this.deptTree));
        } else {
          this.$message.error(data.errorMessage);
        }
      });
    },
    //递归添加
    recursiveget(deptTree) {
      for (var i in deptTree) {
        deptTree[i].value = deptTree[i].departmentGuid;
        deptTree[i].label = deptTree[i].departmentName;
        if (deptTree[i].children.length == 0) {
          delete deptTree[i].children;
        } else {
          this.recursiveget(deptTree[i].children);
        }
      }
    },
    //获取部门简要信息
    getdepartmentinfo() {
      this.searchInfo = {};

      this.searchInfo.unitGuid = this.changeschoolid;
      //   "departmentName": "string",
      //   "empowerRoleGuid": "string",
      //   "userNumber": "string"
      if (this.departmentGuid != []) {
        let departmentGuid = this.departmentGuid[
          this.departmentGuid.length - 1
        ];
        this.searchInfo.departmentGuid = departmentGuid;
      }
      if (this.dataForm.carnumber != "") {
        this.searchInfo.cardNumber = this.dataForm.carnumber;
      }
      if (this.dataForm.username != "") {
        this.searchInfo.userName = this.dataForm.username;
      }

      this.$http({
        url: this.$http.adornUrl("/attendance/attendance-user-by-role-page"),
        method: "post",
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: this.searchInfo
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          console.log(data);
          this.tableData = data.messageContent.data || [];
          this.recordCount = data.messageContent.recordCount;
          this.currentPage = data.messageContent.pageNum;
        } else {
          this.$message.error(data.errorMessage);
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getdepartmentinfo();
    },
    handleCurrentChangepage(val) {
      this.pageNum = val;
      this.getdepartmentinfo();
    },
 
  }
};
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 5px;
}
.page {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>